<template>
	<view>
		<view class="right_opusMap" v-for="(item,index) in list">
			<view class="author">
				<view class="name">
					伊凯x锐思
				</view>
				<view class="time">
					2024-10-05
				</view>
			</view>
			<view class="title">
				{{item.name}}
			</view>
			<view class="opus">
				<view><u-icon name="photo" color="#fff" size="70"></u-icon></view>
				<view><button>赞助解锁</button></view>
				<view class="exegesis">本条及其他43条动态</view>
			</view>
			<view class="features">
				<u-icon @click="toggleShow" name="more-dot-fill"></u-icon>
				<view class="right" >
					<view @click="likeClick(item)">
						<view v-if="!item.collectFlag" class=" custom-icon custom-icon-star">{{item.loveCount}}</view>
						<view v-else class="custom-icon custom-icon-star-full">{{item.loveCount}}</view>
					</view>
					<view><u-icon name="share-square" size="20"></u-icon></view>
				</view>

			</view>
			<view v-if="index !== list.length-1" class="hr" />
		</view>


		<!-- 弹出层 -->
		<u-popup :show="show" mode="bottom" @close="close" @open="open" border-radius="14" height="300rpx">
			<view class="ejectText a">首页不显示该创作者的动态</view>
			<view class="ejectText">举报这条动态</view>
		</u-popup>
	</view>
</template>

<script>
	export default {

		props: {
			list: {
				type: Array,
				required: true,
				default: () => []
			}
		},
		data() {
			return {
				show: false
			}
		},
		watch: {
			list: {
				handler(newItems) {
					console.log('Items changed:', newItems);
					this.$emit('update:initialValue', this.list)
				},
				deep: true
			}
		},
		methods: {
			likeClick(item) {
				item.collectFlag = !item.collectFlag;
			},
			open() { //弹出层
				// console.log('open');
			},
			close() { //弹出层
				this.show = false
				// console.log('close');
			},
			toggleShow() {
				this.show = !this.show; // 切换 show 的值
				console.log(this.show); // 调试输出
			}
		}
	}
</script>

<style lang="scss" scoped>
	.right_opusMap {
		width: 95%;
		margin: auto;
		padding-bottom: 40rpx;

		.author {
			display: flex;
			justify-content: space-between;
			align-items: center;
			line-height: 2;
			font-size: 24rpx;
			color: #8c8c8c;
		}

		.title {
			font-weight: bold;
			line-height: 2;
			font-size: 46rpx;
		}

		.opus {
			width: 95%;
			height: 300rpx;
			margin: auto;
			background: #f7f7f7;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-evenly;
			padding-top: 20rpx;

			view {
				height: 70rpx;

				button {
					width: 100%;
					height: 100%;
					line-height: 70rpx;
					background: #ff6600;
					border-radius: 0 !important;
					color: #fff;
					font-size: 32rpx;
				}
			}

			.exegesis {
				font-size: 24rpx;
				color: #8c8c8c;
			}
		}

		.features {
			width: 95%;
			margin: auto;
			display: flex;
			justify-content: space-between;
			height: 100rpx;

			.right {
				width: 15%;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.custom-icon-star-full {
					color: red;
				}
			}
		}

		.hr {
			border-bottom: 2rpx #cccccc solid;
		}
	}

	.ejectText {
		width: 95%;
		line-height: 100rpx;
		margin: auto;
	}
</style>